﻿@page "/diagram/complex-shapes"

@using Syncfusion.Blazor.Diagrams
@using Syncfusion.Blazor.CircularGauge
@using System.Collections.ObjectModel
@using Syncfusion.Blazor.Calendars
@inherits SampleBaseComponent;

<SampleDescription>
    <p> This sample demonstrates how to host an HTML element inside a node. In this example, a Gauge control and a calender control are hosted inside a HTML Node.</p>
    <p style="font-weight: bold;">A new blazor diagram component which provides better performance than the existing diagram control in Blazor WebAssembly App. It is available in preview mode. Check the samples <a target='_blank' href='diagramcomponent/flowchart'>here</a>.</p>
</SampleDescription>
<ActionDescription>
   <p>This example shows how to host a control inside a node. The <a target='_blank' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramModel.html#Syncfusion_Blazor_Diagrams_DiagramModel_NodeTemplate'>NodeTemplate</a> property of the diagram templates can be used to host HTML content inside a node. The content property of the shape allows you to define the content to be hosted.</p><br>
</ActionDescription>

    <div class="control-section">
        @*Hidden:Lines*@
        <style>
            .e-diagram-resize-handle.e-disabled {
                fill: #ced4da;
                opacity: 1;
                stroke: #fff;
                visibility: hidden;
            }
        </style>
        @*End:Hidden*@
        <div id="diagram-space" class="sb-mobile-diagram">
            <SfDiagram Height="640px" ModelType="@model" Nodes="@NodeCollection">
                <DiagramSnapSettings Constraints="SnapConstraints.None"></DiagramSnapSettings>
                <DiagramTemplates>
                    <NodeTemplate>
                        @{
                            if ((context as Node).Id == "node1")
                            {
                                <SfCircularGauge Width="400px" Height="400px">
                                    <CircularGaugeAxes>
                                        <CircularGaugeAxis StartAngle="210" EndAngle="150" Minimum="0" Maximum="120" Radius="80%">
                                            <CircularGaugeAxisLineStyle Width="10" Color="transparent">
                                            </CircularGaugeAxisLineStyle>
                                            <CircularGaugeAxisLabelStyle UseRangeColor="false">
                                                <CircularGaugeAxisLabelFont Size="12px" FontFamily="Roboto" FontStyle="Regular">
                                                </CircularGaugeAxisLabelFont>
                                            </CircularGaugeAxisLabelStyle>
                                            <CircularGaugeAxisMajorTicks Height="10" Offset="5" UseRangeColor="false">
                                            </CircularGaugeAxisMajorTicks>
                                            <CircularGaugeAxisMinorTicks Height="0" Width="0" UseRangeColor="false">
                                            </CircularGaugeAxisMinorTicks>
                                            <CircularGaugeAnnotations>
                                                <CircularGaugeAnnotation Radius="30%" Angle="0" ZIndex="1" Content="Speedometer">
                                                    <ContentTemplate>
                                                        <div><span style="font-size:14px; color:#9E9E9E; font-family:Regular; margin-left: -33px">Speedometer</span></div>
                                                    </ContentTemplate>
                                                </CircularGaugeAnnotation>
                                                <CircularGaugeAnnotation Radius="40%" Angle="180" ZIndex="1" Content="65 MPH">
                                                    <ContentTemplate>
                                                        <div><span style="font-size:20px; color:#424242; font-family:Regular; margin-left: -33px">65 MPH</span></div>
                                                    </ContentTemplate>
                                                </CircularGaugeAnnotation>
                                            </CircularGaugeAnnotations>
                                            <CircularGaugeRanges>
                                                <CircularGaugeRange Start="0" End="40" Color="#30B32D" StartWidth="10" EndWidth="10" RoundedCornerRadius="0">
                                                </CircularGaugeRange>
                                                <CircularGaugeRange Start="40" End="80" Color="#FFDD00" StartWidth="10" EndWidth="10" RoundedCornerRadius="0">
                                                </CircularGaugeRange>
                                                <CircularGaugeRange Start="80" End="120" Color="#F03E3E" StartWidth="10" EndWidth="10" RoundedCornerRadius="0">
                                                </CircularGaugeRange>
                                            </CircularGaugeRanges>
                                            <CircularGaugePointers>
                                                <CircularGaugePointer Value="65" Radius="60%" PointerWidth="8">
                                                    <CircularGaugePointerAnimation Enable="true"></CircularGaugePointerAnimation>
                                                    <CircularGaugeCap Radius="7">
                                                    </CircularGaugeCap>
                                                    <CircularGaugeNeedleTail Length="18%">
                                                    </CircularGaugeNeedleTail>
                                                </CircularGaugePointer>
                                            </CircularGaugePointers>
                                        </CircularGaugeAxis>
                                    </CircularGaugeAxes>
                                </SfCircularGauge>
                            }
                            if ((context as Node).Id == "node2")
                            {
                                <SfCalendar TValue="DateTime?"></SfCalendar>
                            }
                        }
                    </NodeTemplate>
                </DiagramTemplates>
            </SfDiagram>
        </div>
    </div>

@code
    {
    public Type model = typeof(Node);

    public class Node
    {
        public string Id { get; set; }
        public double Width { get; set; }
    }

    public ObservableCollection<DiagramNode> NodeCollection
    {
        get;
        set;
    }

    protected override void OnInitialized()
    {
        NodeCollection = new ObservableCollection<DiagramNode>();

        DiagramNode node = new DiagramNode()
        {
            Id = "node1",
            Width = 400,
            Height = 400,
            OffsetX = 440,
            Constraints = NodeConstraints.Default & ~NodeConstraints.Resize & ~NodeConstraints.Rotate,
            OffsetY = 260,
            Shape = new DiagramShape() { Type = Syncfusion.Blazor.Diagrams.Shapes.HTML }
        };
        NodeCollection.Add(node);
        DiagramNode node2 = new DiagramNode()
        {
            Id = "node2",
            Width = 262,
            Height = 295,
            OffsetX = 975,
            Constraints = NodeConstraints.Default & ~NodeConstraints.Resize & ~NodeConstraints.Rotate,
            OffsetY = 250,
            Shape = new DiagramShape() { Type = Syncfusion.Blazor.Diagrams.Shapes.HTML }
        };
        NodeCollection.Add(node2);
    }
}
